<template>
    <div>

        <div class="title">
            <div class="desc">承担科研的项目</div>
        </div>

        <el-table :data="membersList" class="table">
            <el-table-column label="开始时间">
                <template #default="scope">
                    <el-date-picker v-if="activeIndex == scope.$index" v-model="scope.row.startTime" type="data"
                        value-format="YYYY-MM-DD" placeholder="开始时间" clearable style="width: 100%" />
                    <span v-else>{{ scope.row.startTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="结束时间">
                <template #default="scope">
                    <el-date-picker v-if="activeIndex == scope.$index" v-model="scope.row.endTime" type="data"
                        value-format="YYYY-MM-DD" placeholder="结束时间" clearable style="width: 100%"
                        @change="computedMonth($event, activeIndex)" />
                    <span v-else>{{ scope.row.endTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="项目名称">
                <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.projectName"
                        placeholder="请输入项目名称"></el-input>
                    <span v-else>{{ scope.row.projectName }}</span>
                </template>
            </el-table-column>

            <el-table-column label="级别">
                <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.level" placeholder="请输入级别"></el-input>
                    <span v-else>{{ scope.row.level }}</span>
                </template>
            </el-table-column>

            <el-table-column label="担任角色">
                <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.role" placeholder="担任角色"></el-input>
                    <span v-else>{{ scope.row.role }}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" width="250">
                <template #header>
                    <span>操作</span>
                </template>
                <template #default="scope">
                    <div v-if="activeIndex == scope.$index">

                        <el-button type="success" @click="handleSave">保存</el-button>
                    </div>
                    <div v-else>
                        <el-button type="primary" @click="handleEdit(scope.$index)">编辑</el-button>
                        <el-popconfirm @confirm="handleDelete(scope.$index)" width="220" confirm-button-text="确定"
                            cancel-button-text="取消" icon-color="#e6a23c" title="你确定要删除当前行?">
                            <template #reference>
                                <el-button type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>



<script  lang="ts">

import { ref, watch } from 'vue';

export default {


    components: {

    },
    emits: {
        dataChange: null,
        paramsChange: null,
    },
    props: {
        members: {
            type: Array,
            required: true,
        }
    },
    setup(props, { emit }) {

        let activeIndex = ref(-1);


        const membersList = ref(props.members)

        watch(props, (newValue, oldValue) => {
            membersList.value = newValue.members
        });


        const handleAdd = () => {

            let item = {
                startTime: '',
                endTime: '',
                projectName: '',
                level: '',
                role: ''
            };

            membersList.value.push(item);

            activeIndex.value = membersList.value.length - 1;

        }

        const handleEdit = (index: number) => {

            activeIndex.value = index;
        };

        const handleSave = () => {

            activeIndex.value = -1;

            emit('paramsChange', membersList.value)

        };

        const handleDelete = (index: number) => {
            membersList.value.splice(index, 1);

            emit('paramsChange', membersList.value)
        };

        return {

            membersList,
            activeIndex,
            handleAdd,
            handleEdit,
            handleSave,
            handleDelete
        }


    },
}
</script>












<style scoped lang="scss">
.title {
    display: flex;
    justify-content: space-between;

    .desc {
        font-weight: bolder;
    }
}

.table {
    margin: 15px 0;
}
</style>
